<!DOCTYPE HTML>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <title>手机号登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 设置初始缩放比例为1.0，使用设备宽度  -->
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <!-- 在iOS下开启全屏模式  -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 隐藏 Sarafi 状态栏  -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="../../css/wapReset.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/personal.css">
    <script src="../../js/jquery.rem.min.js"></script>
    <script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="loginBody">
	<header class="mui-bar mui-bar-nav message_head loginHead">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<!--<h1 class="mui-title">登 录</h1>-->
	</header>
	<h1>手机号登录</h1>
	<div class="bindCont loginCont">
		<input type="tel" id="tel" placeholder="请输入您的手机号" maxlength="11" check="false"/>
		<a href="javascript:;">手机号输入错误，请重新输入</a>
		<div class="picKey" style="display: none;">
			<input type="text" placeholder="请输入图形验证码" check="false"/>
			<span></span>
		</div>
		<div class="picKey" style="display: none;">
			<input type="text" placeholder="请输入短信验证码" id="mesKey"/>
			<button>获取验证码</button>
		</div>
		<button id="regPush" class="loginPush">登 录</button>
	</div>
</body>
<script type="text/javascript">
		mui.init();
		$("#tel").on("input propertychange change",function(event){
        	if($("#tel").val().length==11){
        		//验证手机号
        		if($("#tel").attr("check")=="false"){
        			$("#tel").attr("check","true")
        			var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
					var flag = reg.test($("#tel").val()); //true
					console.log(flag)
					if(flag){
						$("#tel").next("a").css("display","none")
						getImgKey();
						
					}else{
						$("#tel").next().css("display","block")
					}
        		}
        	}else{
        		$(".bindCont>input").eq(0).attr("check","false")
        	}
		});
		
		//调取图片验证码
		function getImgKey(){
			mui.ajax("http://120.76.201.26:8088/msg/img",{
				dataType:"json",
				data:{
					uuid:"4c6a0093-2eb8-3eaf-bdee-c0be0b15654f"
				},
				type:"POST",
				success:function(e){
					console.log(e.data.img_code)
					$(".picKey").eq(0).css("display","block")
					$(".picKey").eq(0).find("input").on("input propertychange change",function(event){
			        	//验证图片验证码是否正确
			        	if($(this).val().length==4){
			        		if($(".picKey").eq(0).find("input").attr("check")=="false"){
			        			$(".picKey").eq(0).find("input").attr("check","true")
//			        			mui.ajax("http://120.76.201.26:8088/msg/verifyImg",{
//			        				type:"POST",
//			        				data:{
//			        					 imgCode:
//			        				},
//			        				success:function(e){
//			        					
//			        				}
//			        			})
			        			if($(".picKey").eq(0).find("input").val()==e.data.img_code){//代表图片验证码正确
				        			//发送短信验证码
				        			postMessage()
				        		}else{
//				        			alert("图片验证码输入错误，请重新输入")
				        			getImgKey();
				        			$(".picKey").eq(0).find("input").attr("check","false")
				        		}
			        		}
			        	}else{
			        		$(".picKey").eq(0).find("input").attr("check","false")
			        	}
					});
				}
			})
		}
</script>
</html>